<template>
    <div class="user">
        <header>
            <router-link to="/mobile/usersetting"><</router-link>
            <h3>修改密码</h3>
        </header>
		<div class="div1">
			输入旧密码<el-input v-model="pwd.oldPwd" placeholder="请输入您的旧密码"></el-input>
			输入新密码<el-input v-model="pwd.newPwd" placeholder="请输入新密码"></el-input>
			确认新密码<el-input v-model="pwd.newPwd2" placeholder="请再次输入新密码"></el-input>
			<el-button type="warning" @click="updatePwd()">确认</el-button>
		</div>
    </div>
</template>

<script>
import {mapActions} from 'vuex'
export default {
    name:'UpdateUser',
    data(){
        return{
			pwd: {
				oldPwd: '',
				newPwd: '',
				newPwd2: ''
			}
        }
    },
    methods:{
		...mapActions(['remove']),
		updatePwd() {
			if (this.pwd.newPwd != this.pwd.newPwd2) {
				return alert("第二次密码有误，请重新输入")
			}else{
				this.$postkv("/api/user/updatePwd", this.pwd).then((resp) => {
					// 清空登录信息
					this.remove();
					this.$router.push({path:'/mobile/usersetting'});
					this.$message({
						message: '密码修改成功',
						type: 'success'
					});
				})
			}
		}
    },
    mounted(){
		
	}
}
</script>

<style scoped>
.user{
	width: 100%;
	background-color: #efefef;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
}
.user header{
	width: 96%;
	line-height: 3rem;
	margin: 0 auto;
	display: flex;
	align-items: center;
}
.user header a {
	font-size: 1.8rem;
	line-height: 3rem;
	color: #000000;
}
.user header h3{
	margin-left: 10rem;
}
.user .div1{
	width: 96%;
	margin: 0 auto;
	margin-top: 1.5rem;
}
.user .div1 .el-input{
	width: 90%;
	margin: 1rem;
}
.user .div1 .el-button{
	width: 10rem;
	margin-left: 28%;
	margin-top: 5%;
}
</style>
